<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Mosaddek">
  <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <link rel="icon" href="../../img/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon" />

  <title>出差工作结果</title>

  <!-- Bootstrap core CSS -->
  <link href="../../css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/bootstrap-reset.css" rel="stylesheet">
  <!--external css-->
  <link href="../../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href="../../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"
  />
  <link rel="stylesheet" href="../../css/owl.carousel.css" type="text/css">

  <link rel="stylesheet" type="text/css" href="../../assets/bootstrap-datepicker/css/datepicker.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/bootstrap-colorpicker/css/colorpicker.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/bootstrap-daterangepicker/daterangepicker.css" />

  <!-- Custom styles for this template -->
  <link href="../../css/style.css" rel="stylesheet">
  <link href="../../css/style-responsive.css" rel="stylesheet" />

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
  <!--[if lt IE 9]>
      <script src="../../js/html5shiv.js"></script>
      <script src="../../js/respond.min.js"></script>
    <![endif]-->

  <!-- 表格组件 -->
  <link rel="stylesheet" type="text/css" href="../../assets/table/dependents/fontAwesome/css/font-awesome.min.css" media="all"
  />
  <link rel="stylesheet" type="text/css" href="../../assets/table/dlshouwen.grid.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/table/dependents/datePicker/skin/WdatePicker.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/table/dependents/datePicker/skin/default/datepicker.css" />

  <!-- pagesilde组件 -->
  <link rel="stylesheet" type="text/css" href="../../assets/pageslide/jquery.pageslide.css" />

  <!-- 流程图绘制组件 -->
  <link rel="stylesheet" type="text/css" href="../../assets/joint/joint.css" />

  <!-- 当前页面CSS -->
  <link href="../../css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <section id="container" class="">
    <!--header start-->
    <header class="header white-bg">
      <div class="sidebar-toggle-box">
        <div data-placement="right" class="icon-reorder tooltips"></div>
      </div>
      <!--logo start-->
      <a href="#" class="logo">
        <span>Certus</span>Net
      </a>
      <!--logo end-->
      <div class="nav notify-row" id="top_menu">
        <!--  notification start -->
        <ul class="nav top-menu">
          <!-- settings start -->
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-tasks"></i>
              <span class="badge bg-success">7</span>
            </a>
            <ul class="dropdown-menu extended tasks-bar">
              <div class="notify-arrow notify-arrow-green"></div>
              <a class="icon-more" href="../../system/notice.html">查看更多</a>
              <li>
                <p class="green">项目动态</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，投标成功，项目负责人李四。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，立项成功，项目负责人张三。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，回款成功，项目负责人王五。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，签约成功，项目负责人陈七。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，招标成功，项目负责人吴晓晓。</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- settings end -->
          <!-- inbox dropdown start-->
          <li id="header_inbox_bar" class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-envelope-alt"></i>
              <span class="badge bg-important">8</span>
            </a>
            <ul class="dropdown-menu extended inbox">
              <div class="notify-arrow notify-arrow-red"></div>
              <a class="icon-more" href="../../system/notice.html">查看更多</a>
              <li>
                <p class="red">通知消息</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920392立项申请，审批通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ92222投标申请，审核通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ926754招标申请，已同意，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920243线索申请，审批未通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920255商务预测，已同意，请及时处理。</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- inbox dropdown end -->
          <!-- notification dropdown start-->
          <li id="header_notification_bar" class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-bell-alt"></i>
              <span class="badge bg-warning">9</span>
            </a>
            <ul class="dropdown-menu extended notification">
              <div class="notify-arrow notify-arrow-yellow"></div>
              <a class="icon-more" href="../../system/notice.html">查看更多</a>
              <li>
                <p class="yellow">系统公告</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">公司内部岗位招聘，有意者请联系相关岗位招聘人员。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">因暴雨天气影响，06月02日全体公司人员放假一天。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">IMS v1.0系统上线，希望各位积极踊跃反馈建议。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">系统更新，新增行政中心板块-新增用章申请。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">系统维护，维护时间：2018年06月01日20:00-2018年06月06日17:00</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- notification dropdown end -->
        </ul>
        <!--  notification end -->
      </div>
      <div class="top-nav ">
        <!--search & user info start-->
        <ul class="nav pull-right top-menu">
          <!-- user login dropdown start-->
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <span class="username">用户名</span>
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu extended logout">
              <div class="log-arrow-up"></div>
              <li>
                <a href="../../office/edit/edit-user-1.html">
                  个人中心
                </a>
              </li>
              <li>
                <a href="../../office/edit/edit-user-2.html">
                  账户设置
                </a>
              </li>
              <li>
                <a href="../../login.html">
                  退出登录
                </a>
              </li>
            </ul>
          </li>
          <!-- user login dropdown end -->
        </ul>
        <!--search & user info end-->
      </div>
    </header>
    <!--header end-->
    <!--sidebar start-->
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu">
          <li>
            <a class="" href="../../index.html">
              <i class="icon-windows"></i>
              <span>信息中心</span>
            </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-book"></i>
              <span>我的项目</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../project/project.html">项目管理</a>
              </li>
              <li>
                <a class="" href="../../project/customer.html">客户管理</a>
              </li>
              <li>
                <a class="" href="../../project/demand.html">需求管理</a>
              </li>
              <li>
                <a class="" href="../../project/problem.html">问题管理</a>
              </li>
              <li>
                <a class="" href="../../project/quality.html">质量管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu active">
            <a href="javascript:;" class="">
              <i class="icon-exchange"></i>
              <span>我的流程</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../do/initiate.html">我的发起</a>
              </li>
              <li class="active">
                <a class="" href="../../do/do.html">待办事项</a>
              </li>
              <li>
                <a class="" href="../../do/tdo.html">已办事项</a>
              </li>
              <li>
                <a class="" href="../../do/meeting.html">会议预定</a>
              </li>
              <li class="active">
                <a class="" href="../../do/oabt.html">出差申请</a>
              </li>
              <li>
                <a class="" href="../../do/afr.html">报销申请</a>
              </li>
              <li>
                <a class="" href="../../do/proc.html">采购申请</a>
              </li>
              <li>
                <a class="" href="../../do/holiday.html">请假调休</a>
              </li>
              <li>
                <a class="" href="../../do/overtime.html">加班申请</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="../../okr/okr.html" class="">
              <i class="icon-calendar"></i>
              <span>OKR管理</span>
            </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-folder-close"></i>
              <span>文档管理 </span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../doct/doct-yf.html">研发类文档</a>
              </li>
              <li>
                <a class="" href="../../doct/doct-sc.html">市场类文档</a>
              </li>
              <li>
                <a class="" href="../../doct/doct-qt.html">行政/其他类</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-bar-chart"></i>
              <span>运营管理 </span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../opmt/bi.html">数据图表</a>
              </li>
              <li>
                <a class="" href="../../opmt/focus.html">关注管理</a>
              </li>
              <li>
                <a class="" href="../../opmt/data.html">项目数据</a>
              </li>
              <li>
                <a class="" href="../../opmt/income.html">收入回款</a>
              </li>
              <li>
                <a class="" href="../../opmt/cost.html">项目费用</a>
              </li>
              <li>
                <a class="" href="../../opmt/human.html">人力投入</a>
              </li>
              <li>
                <a class="" href="../../opmt/htgl.html">合同管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-suitcase"></i>
              <span>行政中心</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../adms/work.html">工作安排</a>
              </li>
              <li>
                <a class="" href="../../adms/time.html">定时提醒</a>
              </li>
              <li>
                <a class="" href="../../adms/certificate.html">证书使用</a>
              </li>
              <li>
                <a class="" href="../../adms/offseal.html">公章使用</a>
              </li>
              <li>
                <a class="" href="../../adms/assets.html">资产管理</a>
              </li>
              <li>
                <a class="" href="../../adms/proc.html">个人资产</a>
              </li>
              <li>
                <a class="" href="../../adms/docking.html">办公对接</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-group"></i>
              <span>人事中心</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../office/org.html">组织架构</a>
              </li>
              <li>
                <a class="" href="../../office/users.html">员工管理</a>
              </li>
              <li>
                <a class="" href="../../office/attd.html">考勤管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-paste"></i>
              <span>规章制度</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../rules/wdgl.html">总则</a>
              </li>
              <li>
                <a class="" href="../../rules/gsbm.html">公司管理制度</a>
              </li>
              <li>
                <a class="" href="../../rules/rygl.html">各部门管理制度</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="" href="../../efficiency/improve.html">
              <i class="icon-rocket"></i>
              <span>效率提升</span>
            </a>
          </li>
          <li>
            <a class="" href="../../school/learning.html">
              <i class="icon-globe"></i>
              <span>网上学堂</span>
            </a>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="icon-cogs"></i>
              <span>系统管理</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../system/notice.html">系统公告</a>
              </li>
              <li>
                <a class="" href="../../system/help.html">帮助文档</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="icon-edit"></i>
              <span>建议反馈</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../../advice/feedback.html">在线反馈</a>
              </li>
              <li>
                <a class="" href="../../advice/tqus.html">问卷调查</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="" href="javascript:;">
              <i class="icon-comments"></i>
              <span>企业论坛</span>
            </a>
          </li>
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
        <!--state overview end-->
        <div class="row">
          <div class="col-lg-12">
            <section class="panel">
              <header class="panel-heading">
                出差申请信息
              </header>
              <div class="panel-body">
                <div class="bio-row">
                  <p>
                    <span>出差单号</span>NJ20180607183025</p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>申请人</span>张三</p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>出差开始时间</span>2018-01-02 08:00</p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>出差结束时间</span>2018-01-05 16:30
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>费用预测合计</span>￥99999.00元
                  </p>
                </div>
                <div class="bio-row line-row">
                  <p>申请说明</p>
                  <p>申请说明测试数据</p>
                </div>
              </div>
            </section>
            <section class="panel">
              <header class="panel-heading">
                出差预测费用明细
              </header>
              <div class="panel-body">
                <div class="bio-row">
                  <p>
                    <span>火车/汽车</span>￥99999.00元
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>飞机</span>￥99999.00元
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>交通费用</span>￥99999.00元
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>住宿费用</span>￥99999.00元
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>招待费</span>￥99999.00元
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>其他费用</span>￥99999.00元
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>出差补助</span>￥99999.00元
                  </p>
                </div>
              </div>
            </section>
            <section class="panel">
              <header class="panel-heading">
                审批记录
              </header>
              <div class="panel-body">
                <div class="bio-row line-row">
                  <p>A项目负责人-张三审批意见：通过，审批意见测试数据</p>
                </div>
                <div class="bio-row line-row">
                  <p>B项目负责人-李四审批意见：通过，审批意见测试数据</p>
                </div>
                <div class="bio-row line-row">
                  <p>C项目负责人-王五审批意见：通过，审批意见测试数据</p>
                </div>
              </div>
            </section>
            <section class="panel hdoabtmeg" style="display: none;">
              <header class="panel-heading">
                工作计划与结果
              </header>
              <div class="panel-body">
                <div class="bio-row">
                  <p>
                    <span>归属项目</span>移动物联网A项目
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>计划开始时间</span>2019-01-02 19:30
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>计划结束时间</span>2019-01-02 19:30
                  </p>
                </div>
                <div class="bio-row">
                  <p>
                    <span>地点</span>南京
                  </p>
                </div>
                <div class="bio-row line-row">
                  <p>工作计划</p>
                  <p>工作计划测试数据</p>
                </div>
                <div class="form-group customerForm">
                  <label class="col-sm-2 control-label">实际计划开始时间</label>
                  <div class="col-sm-4">
                    <input type="text" value="" class="form-control">
                  </div>
                  <label class="col-sm-2 control-label">实际计划结束时间</label>
                  <div class="col-sm-4">
                    <input type="text" value="" class="form-control">
                  </div>
                </div>
                <div class="form-group customerForm">
                  <label class="col-sm-2 control-label">工作结果</label>
                  <div class="col-sm-10">
                    <textarea class="form-control" placeholder="是否完成计划内容，具体完成情况如何？"></textarea>
                  </div>
                </div>
                <p class="default-buttons">
                  <a href="javascript:void(0);" class="button-back btn btn-info" onclick="hdoabtmeg();">取消</a>
                  <a href="javascript:void(0);" class="button-next  btn btn-info">提交</a>
                </p>
              </div>
            </section>
            <section class="panel">
              <div class="panel-heading">
                实际出差时间
              </div>
              <div class="panel-body">
                <div class="form-group customerForm">
                  <label class="col-sm-2 control-label">实际出差开始时间</label>
                  <div class="col-sm-4">
                    <input type="text" value="" class="form-control">
                  </div>
                  <label class="col-sm-2 control-label">实际出差结束时间</label>
                  <div class="col-sm-4">
                    <input type="text" value="" class="form-control">
                  </div>
                </div>
              </div>
              <header class="panel-heading">
                出差计划与结果
              </header>
              <div class="panel-body">
                <div id="oabt2Container" class="dlshouwen-grid-container"></div>
                <div id="oabt2ToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
              </div>
            </section>
            <section class="panel">
              <div class="panel-body">
                <p class="default-buttons">
                  <a href="javascript:void(0);" class="button-back btn btn-info" onclick="window.history.back()">返回</a>
                  <a href="javascript:void(0);" class="button-next  btn btn-info">提交</a>
                </p>
              </div>
            </section>

            <!-- 流程图 -->
            <section class="hdaper">
              <div class="panel">
                <header class="panel-heading">
                  出差申请流程示意图
                </header>
                <div class="panel-body">
                  <div id="paper" class="paper"></div>
                </div>
              </div>
              <div class="paper-bg"></div>
            </section>
            <!-- 流程跟踪 -->
            <section>
              <a href="#modal" class="second" id="process" onclick="shaper();">
                流程跟踪
              </a>
              <section id="modal" style="display:none">
                <div class="proce-head">
                  <!-- <div class="pro-tlf-box">
                <div class="pro"></div>
              </div> -->
                  <div class="pro-tlf-box">
                    <a href="javascript:void(0);" class="button-back btn btn-info" onclick="pDowload();">
                      <i class="icon-cloud-download"></i> 查看出差管理制度说明文件</a>
                  </div>
                  <div class="pro-trg-box">
                    <a class="proce-btn-close" href="javascript:$.pageslide.close()" onclick="hdaper();">关闭</a>
                  </div>
                </div>

                <ul class="proce-content">
                  <li>
                    <label>流程标题：</label>
                    <span>张三提交的出差申请流程</span>
                  </li>
                  <li>
                    <label>创建来源：</label>
                    <span>赛特斯信息科技股份有限公司/副总经理-李四/运营管理部/张三</span>
                  </li>
                  <li>
                    <label>创建日期：</label>
                    <span>2010-01-02 11:09:11</span>
                  </li>
                  <li>
                    <label>流程跟踪：</label>
                  </li>
                </ul>
                <div class="proce-middle">
                  <div class="proce-log">
                    <div class="proce-log-lf">
                      <!-- 虚线 -->
                      <div class="log-dashed"></div>
                    </div>
                    <div class="proce-log-rg">
                      <!-- 节点 -->
                      <div class="log-mark">
                        <!-- 标记点 -->
                        <div class="log-mark-icon mark-prime">
                          发起
                        </div>
                        <!-- 对话框箭头 -->
                        <div class="log-tag"></div>
                        <!-- 节点内容 -->
                        <div class="log-mark-value">
                          <div class="log-mtitle">
                            <span class="log-time">2018-01-02 18:22:22</span>
                            <span class="log-status">状态：任务执行完毕
                              <i></i>
                            </span>
                          </div>
                          <div class="log-mbody">
                            <span class="log-name">办理人：张杨果儿(分管副总及高级总监)</span>
                            <span class="log-more" onclick="shclog()">查看数据</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="proce-log">
                    <div class="proce-log-lf">
                      <!-- 虚线 -->
                      <div class="log-dashed"></div>
                    </div>
                    <div class="proce-log-rg">
                      <!-- 节点 -->
                      <div class="log-mark">
                        <!-- 标记点 -->
                        <div class="log-mark-icon mark-warning">
                          回退
                        </div>
                        <!-- 对话框箭头 -->
                        <div class="log-tag"></div>
                        <!-- 节点内容 -->
                        <div class="log-mark-value">
                          <div class="log-mtitle">
                            <span class="log-time">2018-01-02 18:22:22</span>
                            <span class="log-status">状态：任务执行中
                              <i class="status-blue"></i>
                            </span>
                          </div>
                          <div class="log-mbody">
                            <span class="log-name">办理人：张三(总经理)</span>
                            <span class="log-more" onclick="shclog()">查看数据</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="proce-log">
                    <div class="proce-log-lf">
                      <!-- 虚线 -->
                      <div class="log-dashed"></div>
                    </div>
                    <div class="proce-log-rg">
                      <!-- 节点 -->
                      <div class="log-mark">
                        <!-- 标记点 -->
                        <div class="log-mark-icon mark-success">
                          同意
                        </div>
                        <!-- 对话框箭头 -->
                        <div class="log-tag"></div>
                        <!-- 节点内容 -->
                        <div class="log-mark-value">
                          <div class="log-mtitle">
                            <span class="log-time">2018-01-02 18:22:22</span>
                            <span class="log-status">状态：任务等待中
                              <i class="status-yellow"></i>
                            </span>
                          </div>
                          <div class="log-mbody">
                            <span class="log-name">办理人：李四(财务会计)</span>
                            <span class="log-more" onclick="shclog()">查看数据</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="proce-log">
                    <div class="proce-log-lf">
                      <!-- 虚线 -->
                      <div class="log-dashed"></div>
                    </div>
                    <div class="proce-log-rg">
                      <!-- 节点 -->
                      <div class="log-mark">
                        <!-- 标记点 -->
                        <div class="log-mark-icon mark-blue">
                          办理
                        </div>
                        <!-- 对话框箭头 -->
                        <div class="log-tag"></div>
                        <!-- 节点内容 -->
                        <div class="log-mark-value">
                          <div class="log-mtitle">
                            <span class="log-time">2018-01-02 18:22:22</span>
                            <span class="log-status">状态：子流程执行中
                              <i class="status-purple"></i>
                            </span>
                          </div>
                          <div class="log-mbody">
                            <span class="log-name">办理人：王五(财务主管)</span>
                            <span class="log-more" onclick="shclog()">查看数据</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="proce-log">
                    <div class="proce-log-lf">
                      <!-- 虚线 -->
                      <div class="log-dashed"></div>
                    </div>
                    <div class="proce-log-rg">
                      <!-- 节点 -->
                      <div class="log-mark">
                        <!-- 标记点 -->
                        <div class="log-mark-icon mark-danger">
                          拒绝
                        </div>
                        <!-- 对话框箭头 -->
                        <div class="log-tag"></div>
                        <!-- 节点内容 -->
                        <div class="log-mark-value">
                          <div class="log-mtitle">
                            <span class="log-time">2018-01-02 18:22:22</span>
                            <span class="log-status">状态：子流程执行中
                              <i class="status-purple"></i>
                            </span>
                          </div>
                          <div class="log-mbody">
                            <span class="log-name">办理人：王五(财务主管)</span>
                            <span class="log-more" onclick="shclog()">查看数据</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="proce-log">
                    <div class="proce-log-lf">
                      <!-- 虚线 -->
                      <div class="log-dashed"></div>
                    </div>
                    <div class="proce-log-rg">
                      <!-- 节点 -->
                      <div class="log-mark">
                        <!-- 标记点 -->
                        <div class="log-mark-icon">
                          结束
                        </div>
                        <!-- 对话框箭头 -->
                        <div class="log-tag"></div>
                        <!-- 节点内容 -->
                        <div class="log-mark-value">
                          <div class="log-mtitle">
                            <span class="log-time">2018-01-02 18:22:22</span>
                            <span class="log-status">状态：子流程结束
                              <i class="status-red"></i>
                            </span>
                          </div>
                          <div class="log-mbody">
                            <span class="log-name">办理人：陈六(区域分管副总)</span>
                            <span class="log-more" onclick="shclog()">查看数据</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </section>
            </section>

          </div>
        </div>
      </section>
    </section>
    <!--main content end-->
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
  <script src="../../js/jquery.js"></script>
  <script src="../../js/jquery-1.8.3.min.js"></script>
  <script src="../../js/bootstrap.min.js"></script>
  <script src="../../js/jquery.scrollTo.min.js"></script>
  <script src="../../js/jquery.nicescroll.js" type="text/javascript"></script>
  <script src="../../js/jquery.sparkline.js" type="text/javascript"></script>
  <script src="../../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
  <script src="../../js/owl.carousel.js"></script>
  <script src="../../js/jquery.customSelect.min.js"></script>

  <script type="text/javascript" src="../../assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="../../assets/bootstrap-daterangepicker/date.js"></script>
  <script type="text/javascript" src="../../assets/bootstrap-daterangepicker/daterangepicker.js"></script>

  <!--common script for all pages-->
  <script src="../../js/common-scripts.js"></script>

  <!--script for this page-->
  <script src="../../js/sparkline-chart.js"></script>
  <script src="../../js/easy-pie-chart.js"></script>

  <!-- 外部公共js文件引入 -->
  <script src="../../js/layout.js"></script>
  <!-- layer组件 -->
  <script src="../../assets/layer/layer.js"></script>
  <!-- 表格组件 -->
  <script type="text/javascript" src="../../assets/table/dlshouwen.grid.js"></script>
  <script type="text/javascript" src="../../assets/table/i18n/zh-cn.js"></script>
  <script type="text/javascript" src="../../assets/table/dependents/datePicker/WdatePicker.js" defer="defer"></script>

  <!-- pageslide -->
  <script type="text/javascript" src="../../assets/pageslide/jquery.pageslide.min.js"></script>

  <!-- 流程图绘制组件 -->
  <script type="text/javascript" src="../../assets/joint/lodash.min.js"></script>
  <script type="text/javascript" src="../../assets/joint/backbone-min.js"></script>
  <script type="text/javascript" src="../../assets/joint/joint.min.js"></script>

  <!-- 当前页面js文件引入 -->
  <script src="../../js/do/cost.js"></script>

  <script>
    //流程图绘制
    function tgraph() {
      var graph = new joint.dia.Graph();

      var ElementView = joint.dia.ElementView.extend({
        pointerdown: function () {
          this._click = true;
          joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
        },
        pointermove: function (evt, x, y) {
          this._click = false;
          joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
        },
        pointerup: function (evt, x, y) {
          if (this._click) {
            // triggers an event on the paper and the element itself
            this.notify('cell:click', evt, x, y);
          } else {
            joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
          }
        }
      });
      var LinkView = joint.dia.LinkView.extend({
        addVertex: function (evt, x, y) {},
        removeVertex: function (endType) {},
        pointerdown: function (evt, x, y) {}
      });

      //定义画布
      var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 535,
        height: 465,
        gridSize: 1,
        model: graph,
        elementView: ElementView,
        linkView: LinkView
      });

      //paper.$el.css('pointer-events', 'none')//去除默认样式，使所有事件不可用

      //定义形状
      var state = function (x, y, shape, background, text) {
        var cell;
        if (shape === "rect") {
          cell = new joint.shapes.basic.Rect({
            position: {
              x: x,
              y: y
            }, //坐标
            size: {
              width: 80,
              height: 80
            }, //宽高
            attrs: {
              rect: {
                fill: {
                  type: 'linearGradient',
                  stops: [{
                      offset: '0%',
                      color: background
                    }, //渐变开始
                    {
                      offset: '100%',
                      color: background
                    } //渐变结束
                  ],
                  attrs: {
                    x1: '0%',
                    y1: '0%',
                    x2: '0%',
                    y2: '100%'
                  }
                },
                stroke: '#e0e0e0', //边框颜色
                'stroke-width': 5 //边框大小
              },
              text: {
                'font-weight': 100,
                'font-size': 12,
                fill: '#ede7cf',
                text: text,
              } //显示文字
            }
          });
        } else if (shape === "ellipse") {
          cell = new joint.shapes.basic.Ellipse({
            position: {
              x: x,
              y: y
            }, //坐标
            size: {
              width: 80,
              height: 80
            }, //宽高
            attrs: {
              ellipse: {
                fill: {
                  type: 'linearGradient',
                  stops: [{
                      offset: '0%',
                      color: background
                    }, //渐变开始
                    {
                      offset: '100%',
                      color: background
                    } //渐变结束
                  ],
                  attrs: {
                    x1: '0%',
                    y1: '0%',
                    x2: '0%',
                    y2: '100%'
                  }
                },
                stroke: '#e0e0e0', //边框颜色
                'stroke-width': 5 //边框大小
              },
              text: {
                'font-weight': 100,
                'font-size': 12,
                fill: '#ede7cf',
                text: text
              } //显示文字
            }
          });
        }
        graph.addCell(cell);
        return cell;
      };

      //定义连线
      function link(source, target, label) {
        var cell = new joint.dia.Link({
          source: {
            id: source.id
          },
          target: {
            id: target.id
          },
          labels: [{
            position: 0.5,
            attrs: {
              text: {
                text: label || '',
                'font-size': 12,
                'font-weight': 'bold'
              }
            }
          }],
          router: {
            name: 'manhattan'
          }, //设置连线弯曲样式 manhattan直角

          toolMarkup: '<g></g>', // 去掉tool，包括红色x
          arrowheadMarkup: "<g></g>", //去掉两头的箭头

          attrs: {
            '.connection': {
              stroke: '#999', //连线颜色
              'stroke-width': 2 //连线粗细
            },
            '.marker-target': {
              fill: '#999', //箭头颜色
              'stroke-width': 0, //边框大小
              d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
            }
          }
        });
        graph.addCell(cell);
        return cell;
      }

      //创建元素
      var start = state(60, 60, "ellipse", "#4f6d7d", "录入出差信息");
      var state1 = state(220, 60, "ellipse", "#4f6d7d", joint.util.breakText("领导审批", {
        width: 70
      }));
      var state2 = state(400, 60, "ellipse", "#4f6d7d", "录入出差结果");
      var state3 = state(400, 300, "ellipse", "#4f6d7d", joint.util.breakText("相关联项目负责人审批", {
        width: 70
      }));
      var state4 = state(220, 300, "ellipse", "#4f6d7d", "结束");

      //创建连线
      link(start, state1, "");
      link(state1, state2, "");
      link(state2, state3, "");
      link(state3, state4, "");

      //给所有元素添加点击事件
      paper.on('cell:click', function (e) {
        shclog()
      });
    };
    tgraph();
  </script>

  <!-- 流程跟踪js文件引入 -->
  <script src="../../js/do/aper.js"></script>

</body>

</html>